<template>
    <el-dialog
      :title="curTitle + '-全文'"
      :visible.sync="lawDialogVisible"
      width="61.7%"
      height="500"
      :close-on-click-modal="true"
      :modal="false"
      custom-class="abolishDialog"
      @close="handleClose"
    >
      <div class="lawContent">
       
        <div class="fullTextContent">
          <p
            v-if="refresh"
            style="
              width: 100%;
            "
            v-html="lawFullText || '暂无数据'"
            class="el-tiptap-editor__content"
          ></p>
        </div>
      </div>
    </el-dialog>
  </template>
  
  
  <script>
  export default {
    components: {},
    props: {
      curTitle: {
        type: String,
        default: () => {
          return '提示';
        },
      },
      content: {
        type: String,
        default: () => {
          return '';
        },
      },
    },
    data() {
      return {
        lawDialogVisible: false, //弹框显隐
        lawFullText: '',
        searchIndex: 0,
        searchAllIndexs: 0,
        keyword: '',
        refresh: true,
      };
    },
    
    mounted() {
      this.lawFullText = JSON.parse(JSON.stringify(this.content))
    },
    watch: {},
    computed: {},
  
    methods: {
      /**
       * @description:打开弹框回调
       */
      openDialog() {
        this.lawDialogVisible = true;
      },
      
      // 法律法规全文内容关键词搜索高亮
      lawFullTextSearch() {
        // window.console.log(this.keyword)
        if (this.keyword && this.keyword !== '' && this.lawFullText.indexOf(this.keyword) != -1) {
          this.searchAllIndexs = (this.lawFullText.split(this.keyword).length - 1) || 0
          this.searchIndex = 1
          this.lawFullText = this.lawFullText.replace(new RegExp(this.keyword, 'g'), `<em class='searchText'>${this.keyword}</em>`); // 通过正则全局匹配关键字，查出来的文字进行高亮替换
          setTimeout(() => {
            let allSearchIndex = document.querySelectorAll('em')
            allSearchIndex[this.searchIndex - 1].className = 'curSearchText'
            // 使滚动条滚动到指定位置
            this.scrollChange()
          }, 0)
        } else {
          this.resetSearch()
          this.$message.info('无当前查询内容 或 未输入关键词！')
        }
      },
      
      // 重置搜索内容
      resetSearch(resetKey = false) {
        if(resetKey) {
          this.keyword = ''
        }
        this.searchAllIndexs = 0;
        this.searchIndex = 0;
        // 清除上次的查询记录
        this.lawFullText = this.lawFullText.replace(new RegExp('</?em.*?>', 'gi'), ``);
        // 刷新
        this.refresh = false;
        setTimeout(() => {
          this.refresh = true;
        }, 0)
      },
      
      // 查询内容上一个
      searchIndexUp() {
        if(this.searchIndex > 0 && this.searchIndex <= this.searchAllIndexs && this.searchAllIndexs > 0) {
          this.searchIndex = (this.searchIndex + 1) > this.searchAllIndexs ? 1 : (this.searchIndex + 1)
          setTimeout(() => {
            let allSearchIndex = document.querySelectorAll('em')
            // 清除上一个选中样式
            allSearchIndex[this.searchIndex - 2 < 0 ? this.searchAllIndexs - this.searchIndex : this.searchIndex - 2].className = 'searchText'
            allSearchIndex[this.searchIndex - 1].className = 'curSearchText'
            
            // 使滚动条滚动到指定位置
            this.scrollChange()
          }, 0)
        } else {
          this.searchIndex = 0
        }
      },
      
      // 查询内容下一个
      searchIndexDown() {
        if(this.searchIndex > 0 && this.searchIndex <= this.searchAllIndexs && this.searchAllIndexs > 0) {
          this.searchIndex = (this.searchIndex - 1) <= 0 ? this.searchAllIndexs : (this.searchIndex - 1)
          setTimeout(() => {
            let allSearchIndex = document.querySelectorAll('em')
            // 清除上一个选中样式
            allSearchIndex[this.searchIndex > this.searchAllIndexs - 1 ? this.searchAllIndexs - this.searchIndex  : this.searchIndex].className = 'searchText'
            allSearchIndex[this.searchIndex - 1].className = 'curSearchText'
            
            // 使滚动条滚动到指定位置
            this.scrollChange()
          }, 0)
        } else {
          this.searchIndex = 0
        }
      },
      
      /**
       * @description:关闭弹框回调
       */
      handleClose() {
        this.lawDialogVisible = false;
        setTimeout(() => {
          this.lawFullText = ''
          this.keyword = ''
          this.searchIndex = 0
          this.searchAllIndexs = 0
          this.$emit('close')
        }, 0)
      },
      
      // 滚动条定位
      scrollChange() {
        let fullTextDom = document.querySelector('.fullTextContent')
        let curDom = document.querySelector('.curSearchText').parentNode
        // window.console.log(curDom, curDom.offsetTop)
        fullTextDom.scrollTop = curDom.offsetTop - 137  || 0
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
    /deep/  .abolishDialog {
      background: #ffffff !important;
      border: 1px solid #cccccc !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-top: 0 !important;
      min-width: 480px;
      .lawContent {
        height: 50vh;
        min-height: 500px;
        display: flex;
        align-content: space-around;
        flex-wrap: wrap;
        .searchBox {
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .el-input__inner {
            padding-right: 100px;
          }
          .el-input__suffix-inner {
            width: 90px;
            display: flex;
            justify-content: space-between;
            .indexChange {
              width: 100%;
              display: flex;
              justify-content: space-around;
              align-items: center;
              .btnBox {
                display: flex;
                flex-direction: column;
                margin: 0 5px;
              }
            }
          }
        }
        .fullTextContent {
          width: 100%;
          height: calc(100% - 70px);
          padding-top: 20px;
          overflow-y: auto;
          .searchText {
            background-color: yellow;
            color: #333;
            font-weight: bold;
            margin: 0 3px;
            padding: 2px;
            border-radius: 5px;
          }
          .curSearchText {
            background-color: red;
            color:white;
            padding: 3px;
            font-weight: bold;
            margin: 0 3px;
            padding: 2px;
            border-radius: 5px;
          }
        }
      }
      /deep/ .el-dialog__header {
        border-bottom: 0.5px solid #cccccc !important;
        padding: 0 15px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /deep/ .el-dialog__headerbtn {
          width: 20px;
          position: relative;
          top: 0;
          right: 0;
        }
        // height: 48px !important;
      }
      /deep/ .el-dialog__body {
        // min-height: 100px;
        padding: 15px;
        /deep/  .title {
          font-size: 10.5px;
          color: #f56c6c;
          text-align: right;
          margin-top: 15px;
        }
      }
      /deep/  .el-dialog__footer {
        border-top: 0.5px solid #cccccc !important;
        padding: 10px;
      }
    }
  </style>
  